let uu = document.querySelector('#list ul');
let di = document.querySelector('#dowmimg ul')
let id = getQueryString('couponid');
// console.log(id)
fetch('http://chst.vip:1234/api/getcouponproduct?couponid=' + id)
    .then(body => body.json())
    .then(res => {
        console.log(res)
        let el = ""
        let dl = ""
        res.result.forEach(item => {
            let regExp = /^<[^<]+\s+src="([^''""]*)"/;
            let reg = item.couponProductImg.match(regExp)
            el += `<li couponProductid=${item.couponProductId} couponid=${item.couponId}>
            <a href="#" couponid=${item.couponId} couponProductid=${item.couponProductId}><img src=${reg[1]}></a>
            <div class="message" couponid=${item.couponId}>
                    <p couponid=${item.couponId} couponProductid=${item.couponProductId}>${item.couponProductName}</p>
                    <b couponid=${item.couponId} couponProductid=${item.couponProductId}>${item.couponProductPrice}</b>
                    <span couponid=${item.couponId} couponProductid=${item.couponProductId}>${item.couponProductTime}</span>
            </div>
            </li>`
            dl += `<li couponProductid=${item.couponProductId} couponid=${item.couponId}><img src=${reg[1]}></li>`

        })
        uu.innerHTML = el;
        di.innerHTML = dl
    })

$('#dowmimg').css("top", '-700px')

$('#list').on('click','ul li',function(e){
        console.log($(this))
        let w = $(this).attr('couponProductid')
        console.log(w)
        $(this).parent().parent().prev().find('ul').css({ 'left': w*-200 + 'px' })   
        let ii;
        let ll;
        ii=$(this).parent().parent().prev().find('ul').position().left;
        console.log(ii)
        ll=$(this).parent().parent().prev().find('ul').position().right;
        console.log(ll)
        if (e.target.localName = 'li.all') {
            // console.log("yy");
            let _this = e.target
            $(_this).parent().parent().parent().parent().prev().animate({ 'top': '0' });
           
            // console.log(ll)
            $('#dowmimg').on('click', '.left', function () {
                // console.log("yy")
                console.log(ii)
                if(ll==0){
                    alert('这是最后一张页面啦')
                }else{
                    ii -= 200
                    $(this).next().next().find('ul').stop().animate({ 'left': ii + 'px' })
                }
               
            })
            $('#dowmimg').on('click', '.right', function () {
                // console.log("yy")
                console.log(ii)
                if(ii==0){
                    alert('这是第一张页面啦')
                }else{
    
                    ii += 200
                    console.log(ii)
                    $(this).next().find('ul').stop().animate({ 'left': ii + 'px' })
                }
            })
        }
})
// uu.onclick = function (e) {
    
//     console.log($(this))
//     let w = $(this).find('li').attr('couponProductid')
//     console.log(w)
//     let ii
//     let ll
//     ii=$(this).parent().prev().find('ul').position().left;
//     ll=$(this).parent().prev().find('ul').position().right;
//     $(this).parent().prev().find('ul').animate({ 'left': ii*w + 'px' })
//     // console.log(ii)
//     if (e.target.localName = 'li.all') {
//         // console.log("yy");
//         let _this = e.target
//         $(_this).parent().parent().parent().parent().prev().animate({ 'top': '0' });
       
//         // console.log(ll)
//         $('#dowmimg').on('click', '.left', function () {
//             // console.log("yy")
//             console.log(ii)
//             if(ll==0){
                
//             }else{
//                 ii -= 200
//                 $(this).next().next().find('ul').animate({ 'left': ii + 'px' })
//             }
           
//         })
//         $('#dowmimg').on('click', '.right', function () {
//             // console.log("yy")
//             console.log(ii)
//             if(ii==0){
//                 alert('这是第一张页面啦')
//             }else{

//                 ii += 200
//                 console.log(ii)
//                 $(this).next().find('ul').animate({ 'left': ii + 'px' })
//             }
//         })
//     }
// }

$('#dowmimg').on('click', '.img i', function () {
    // console.log("yy")
    // console.log(i)
    $(this).parent().parent().animate({ 'top': '-700px' })
})
// $('#dowmimg').on('click', '.left', function () {
//     console.log("yy")
//     if(i==0){
//         alert('这是第一张页面啦')
//     }else{
//         i -= 200
//         $(this).next().next().find('ul').animate({ 'left': i + 'px' })
//     }
   
// })
// $('#dowmimg').on('click', '.right', function () {
//     console.log("yy")
//     i += 200
//     console.log(i)
//     $(this).next().find('ul').animate({ 'left': i + 'px' })
// })



